import { Form, Button, Input, Row, Col, message } from 'antd';
import { promiseFSA } from 'actions/util';

const FormItem = Form.Item;

const formLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 }
};
const buttonLayout = {
  span: '18',
  offset: '4'
};

let PropertiesForm = ({ unit, form, onPropertiesUpdate }) => {
  const { getFieldProps, validateFields } = form;
  const properties = JSON.parse(unit.properties) || {};
  const portsField = getFieldProps('ports', {
    initialValue: properties.ports || '',
    rules: [
      { required: true, message: '容器端口不能为空' }
    ]
  });
  const envField = getFieldProps('env', {
    initialValue: properties.env || ''
  });
  const hostsField = getFieldProps('extraHosts', {
    initialValue: properties.extraHosts || ''
  });

  const onSubmit = (evt) => {
    evt.preventDefault();
    validateFields((error, values) => {
      if (!!error) {
        return;
      }
      const p = { properties: JSON.stringify(values) };
      onPropertiesUpdate(unit.id, unit.runtimeId, p)
        .then(promiseFSA)
        .then(() => {
          message.success('保存成功');
        });
    });
  };

  return (
    <Form horizontal onSubmit={onSubmit} form={form}>
      <FormItem label='暴露端口：' {...formLayout}>
        <div className='form-item-tip'>
          Docker 内外暴露的端口，格式为 [外部端口:]内部端口，例如： “8088:8080, 8080, 0”。可写多个，一行一个。<br/>
          当省略外部端口时，外部端口将会是一个随机可用的端口，并且通过环境变量 TERMINUS_PORT_内部端口=外部端口 写入 container 内。<br/>
          当单独写一个 0 时，内外端口都会是一个随机可用端口，并且通过环境变量 TERMINUS_PORT=随机端口 写入 container 内。
        </div>
        <Input type='textarea' rows='5' {...portsField}/>
      </FormItem>
      <FormItem label='额外环境变量：' {...formLayout}>
        <div className='form-item-tip'>
          写入 container 内的环境变量，格式为：ENV_KEY=env_value 。可写多个，一行一个。<br/>
          平台会内置数个环境变量，包含上述暴露端口中的 TERMINUS_PORT_ 系列，和 TERMINUS_HOST=宿主机IP 。
        </div>
        <Input type='textarea' rows='10' {...envField}/>
      </FormItem>
      <FormItem label='额外 hosts：' {...formLayout}>
        <div className='form-item-tip'>
          写入 container 内的 /etc/hosts ，格式为：domain:ip 。可写多个，一行一个。<br/>
          平台会内置一个 hosts ，terminus.host:宿主机IP 。
        </div>
        <Input type='textarea' rows='5' {...hostsField}/>
      </FormItem>
      <Row>
        <Col {...buttonLayout}>
          <Button type='primary' htmlType='submit'>确定</Button>
        </Col>
      </Row>
    </Form>
  );
};
PropertiesForm = Form.create()(PropertiesForm);

export default PropertiesForm;
